<template>
	<view class="customer">
		<view class="top_box">
			<view class="top">
				<view class="hlogo">
					<view class="himg">
						<image class="hp" :src="info.imageUrl" mode=""></image>
					</view>
					<view class="name_box">
						<view class="name">
							{{info.name}}
						</view>
						<view class="id_box">
							电话号：{{info.phone}}
							<!-- <view class="id_box_left">
								牛果：{{Number(info.integral || 0)}}
							</view>
							<view class="id_box_right">
								预估佣金：{{Number(info.projectionsCommissions || 0)}}
							</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var that;
	import {
		customersuperior
	} from '@/api/mine'
	export default {
		data() {
			return {
				datetimerange: [],
				type: 0,
				src: "../../static/tabsIcon/headlogo.png",
				top: [],
				info: [],
				list: [],
				listT: [],
				datetimeranget: [],
			}
		},

		onLoad() {
			that = this;
			this.customersuperior();
		},
		methods: {
			customersuperior() {
				customersuperior().then(res => {
						if (res.success == 1) {
							this.info = res.data;
						} else {
							uni.showToast({
								icon: 'none',
								title: res.message
							})
						}
					})
					.catch(err => {

					});
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f4f4f4;
	}

	.customer {
		padding: 20rpx;
	}

	.top_box {
		background: url(../../static/tabsIcon/club/clubbg.png) no-repeat;
		color: #FFFFFF;
		background-size: 100% 100%;
		border-radius: 20rpx;
		padding: 40rpx;

		.top {
			.hlogo {
				display: flex;
				color: #FFFFFF;

				.himg {
					position: relative;
					margin-right: 30rpx;

					.hp {
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
						overflow: hidden;
					}
				}

				.name_box {
					text-align: left;

					.name {
						text-align: left;
						margin-bottom: 5rpx;
					}

					.id_box {
						font-size: 24rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.id_box_left {}

						.id_box_right {
							margin-left: 40upx;
						}
					}
				}

			}


		}

		.info_list {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: 66rpx;
			font-size: 28rpx;
			text-align: center;

			.info_name {
				margin-bottom: 10rpx;
			}
		}
	}

	.mid {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 20rpx;
	}

	.list_content {
		margin-top: 10rpx;

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.left {
				display: flex;
				align-items: center;

				image {
					width: 80rpx;
					height: 80rpx;
					margin-right: 15rpx;
					border-radius: 50%;
				}

				.name {
					color: #333333;
					font-size: 30rpx;
					margin-bottom: 10rpx;
				}

				.id {
					color: #999999;
					font-size: 24rpx;
				}
			}

			.right {
				font-size: 24rpx;
				color: #999999;
			}

		}
	}
</style>
